<template>
    <div>
         <nav-bar class="home_nav"><div slot="center">购物车({{setcartLists.length}})</div></nav-bar>
        <cart-list></cart-list>
         <cart-bottom-bar/>
    </div>
</template>
<script>
import NavBar from 'components/common/navbar/NavBar'
import CartList from './childcomps/CartList'
import CartBottomBar from './childcomps/CartBottomBar'
import { mapGetters } from 'vuex'
    export default {
        name:'Cart',
        data(){
            return {

            }
        },
        components:{
            NavBar,
            CartList,
            CartBottomBar
        },
        computed: {
            // 这种那法报错了
            // setcartList:()=>{
            //         console.log('$store');
            //         // console.log(this.$store.getters);
            //     // return this.$store.getters.setcartList;
            // }

            // setcartLists(){
            //     console.log('$store');
            //     const arrs = this.$store.getters.setcartList;
            //     return arrs.length;
            //     // console.log(arrs);
            //     // return this.$store.getters.setcartList;
            // },
            ...mapGetters({  //将getters的属性转化成计算属性
                setcartLists: "setcartList"  //这里的是字符串 不是变量
            })
        },
    }
</script>
<style scope>
.home_nav{
    background-color: pink;
}
.home_nav .center{
    color:#fff;
    font-size: 16px;
}
</style>